import React from 'react'
import '../../assets/css/profile/orderinfo.less'
export default class OrderInfoComponents extends React.Component{
    constructor(){
        super()
        this.state= {
            code: "143627404",
            data: {
                goods: []
            }
        }
    }
    componentDidMount() {
        this.getCom()
        console.log(this.props.history.location);
        if(this.props.history.location.query!==undefined){
            this.setState({
                code:this.props.history.location.query.id
            })
        }
    }

    //获取评论
    getCom(){
        fetch('http://vueshop.glbuys.com/api/user/myorder/desc?uid='+localStorage['uid']+'&ordernum='+this.state.code+'&token=1ec949a15fb709370f').then((res)=>res.json())
            .then((res)=>{
                console.log(res.data);
                if(res.code===200){
                    this.setState({
                        data:res.data
                    })
                }
            })
    }


    goBack(){
        this.props.history.goBack()
    }
    render() {
        return(
            <div id='orderinfo'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>订单详情</div>
                    <div></div>
                </div>
                <div className='ordernum'>
                    订单编号:{this.state.data.ordernum}
                </div>
                <div className='site'>
                    <div>
                        <div><img src="/images/common/my2.png" alt=""/>{this.state.data.name}</div>
                        <div><img src="/images/common/cellphone.png" alt=""/>{this.state.data.cellphone}</div>
                    </div>
                    <div>
                        {this.state.data.province}{this.state.data.city}{this.state.data.area}{this.state.data.address}
                    </div>
                </div>
                <div className='buy'>购买的宝贝</div>
                {this.state.data.goods.map((item,index)=>{
                    return(
                        <div className='good' key={index}>
                            <img src={item.image} alt=""/>
                            <div>
                                <div>{item.title}</div>
                                <div>
                                    <div>x{item.amount}</div>
                                    <div>{item.param[0].title}: {item.param[0].param[0].title}</div>
                                    <div>{item.param[1].title}: {item.param[1].param[0].title}</div>
                                    <div></div>
                                </div>
                            </div>
                            <div>
                                ￥{item.price}
                            </div>
                        </div>
                    )
                })}
                <div className='status'>
                    <div>支付状态</div>
                    <div>{this.state.data.status==='0'?'待付款':''}{this.state.data.status==='1'?'待收货':''}{this.state.data.status==='2'?'已收货':''}</div>
                </div>
                <div className='total'>
                    <div>
                        <div>商品总额</div>
                        <div>￥{this.state.data.total}</div>
                    </div>
                    <div>
                        <div>+运费</div>
                        <div>￥{this.state.data.freight}</div>
                    </div>
                </div>
                <div className='truetotal'>
                    <div>实付金额:     <span>￥{this.state.data.truetotal}</span> </div>
                    <div>下单时间: {this.state.data.ordertime}</div>
                </div>
            </div>
        )
    }
}